<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑个人资料 - 多元社交</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --primary-light: #E8F3FF;
            --secondary: #0FC6C2;
            --text-dark: #1D2129;
            --text-gray: #4E5969;
            --text-light: #86909C;
            --border: #E5E6EB;
            --bg-light: #F2F3F5;
            --success: #00B42A;
            --warning: #FF7D00;
            --danger: #F53F3F;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--text-dark);
            background-color: #F7F8FA;
            line-height: 1.6;
        }

        /* 顶部导航栏 */
        .main-nav {
            background-color: white;
            border-bottom: 1px solid var(--border);
            padding: 0.75rem 1.5rem;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .navbar-brand {
            color: var(--primary);
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .search-box {
            position: relative;
            max-width: 400px;
            width: 100%;
        }

        .search-input {
            width: 100%;
            padding: 0.5rem 1rem 0.5rem 2.5rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            background-color: var(--bg-light);
            font-size: 0.9rem;
        }

        .search-input:focus {
            outline: none;
            border-color: var(--primary);
        }

        .search-icon {
            position: absolute;
            left: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
        }

        .nav-actions .nav-link {
            color: var(--text-gray);
            margin: 0 0.5rem;
            font-weight: 500;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .nav-actions .nav-link:hover {
            color: var(--primary);
        }

        .notification-badge {
            position: relative;
        }

        .badge-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: var(--danger);
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 主容器 */
        .dashboard-container {
            display: flex;
            min-height: calc(100vh - 58px);
        }

        /* 侧边栏导航 */
        .sidebar {
            width: 260px;
            background-color: white;
            border-right: 1px solid var(--border);
            padding: 1.5rem 0;
            flex-shrink: 0;
            height: calc(100vh - 58px);
            position: sticky;
            top: 58px;
            overflow-y: auto;
        }

        .user-profile-preview {
            padding: 0 1.5rem 1.5rem;
            border-bottom: 1px solid var(--border);
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .preview-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--primary-light);
            margin: 0 auto 1rem;
        }

        .preview-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
        }

        .preview-bio {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-bottom: 1rem;
            line-height: 1.4;
        }

        .edit-profile-btn {
            width: 100%;
            background-color: var(--primary-light);
            color: var(--primary);
            border: none;
            border-radius: 6px;
            padding: 0.5rem;
            font-weight: 500;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .edit-profile-btn:hover {
            background-color: var(--primary);
            color: white;
        }

        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar-menu-item {
            margin-bottom: 0.25rem;
        }

        .sidebar-menu-link {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1.5rem;
            color: var(--text-gray);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s;
        }

        .sidebar-menu-link:hover, .sidebar-menu-link.active {
            background-color: var(--primary-light);
            color: var(--primary);
        }

        .menu-icon {
            width: 20px;
            text-align: center;
        }

        .menu-badge {
            margin-left: auto;
            background-color: var(--primary);
            color: white;
            border-radius: 10px;
            padding: 0.1rem 0.5rem;
            font-size: 0.8rem;
        }

        .menu-section-title {
            padding: 1rem 1.5rem 0.5rem;
            font-size: 0.8rem;
            text-transform: uppercase;
            color: var(--text-light);
            letter-spacing: 0.5px;
        }

        /* 主内容区域 */
        .main-content {
            flex-grow: 1;
            padding: 2rem;
            max-width: calc(100% - 260px);
        }

        .content-header {
            margin-bottom: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .page-description {
            color: var(--text-light);
            font-size: 1rem;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
        }

        .btn {
            padding: 0.5rem 1.25rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .btn-primary {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        .btn-primary:hover {
            background-color: #0E4CD1;
            border-color: #0E4CD1;
        }

        .btn-outline-secondary {
            color: var(--text-gray);
            border-color: var(--border);
        }

        .btn-outline-secondary:hover {
            background-color: var(--bg-light);
            color: var(--text-dark);
        }

        /* 表单样式 */
        .profile-form-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .form-section {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid var(--border);
        }

        .form-section:last-child {
            border-bottom: none;
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-group {
            flex: 1;
            min-width: 250px;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-dark);
        }

        .form-text {
            font-size: 0.85rem;
            color: var(--text-light);
            margin-top: 0.25rem;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 1rem;
            transition: border-color 0.2s;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        }

        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        /* 头像上传区域 */
        .avatar-upload-section {
            display: flex;
            align-items: center;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .current-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid white;
            box-shadow: var(--shadow);
        }

        .avatar-upload-options {
            flex: 1;
            min-width: 300px;
        }

        .upload-info {
            margin-bottom: 1rem;
            color: var(--text-gray);
        }

        .file-upload-btn {
            display: inline-block;
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.5rem 1.25rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            margin-right: 1rem;
        }

        .file-upload-btn:hover {
            background-color: var(--primary);
            color: white;
        }

        .file-input {
            display: none;
        }

        /* 兴趣爱好标签 */
        .interests-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .interest-tag {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.35rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .remove-interest {
            background: none;
            border: none;
            color: var(--primary);
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
        }

        .add-interest {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background-color: var(--bg-light);
            color: var(--text-gray);
            padding: 0.35rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            border: 1px dashed var(--border);
            cursor: pointer;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .sidebar {
                width: 80px;
                padding: 1.5rem 0;
            }

            .sidebar-menu-link span,
            .menu-badge,
            .menu-section-title,
            .user-profile-preview {
                display: none;
            }

            .sidebar-menu-link {
                justify-content: center;
                padding: 0.75rem;
            }

            .main-content {
                max-width: calc(100% - 80px);
                padding: 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                height: auto;
                top: auto;
                border-right: none;
                border-top: 1px solid var(--border);
                z-index: 999;
            }

            .sidebar-menu {
                display: flex;
                justify-content: space-around;
            }

            .sidebar-menu-item {
                margin-bottom: 0;
                flex: 1;
            }

            .main-content {
                max-width: 100%;
                padding-bottom: 80px;
            }

            .search-box {
                display: none;
            }

            .content-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .action-buttons {
                width: 100%;
                justify-content: space-between;
            }

            .form-row {
                flex-direction: column;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar main-nav">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="fas fa-connectdevelop"></i> 多元社交
            </a>
            
            <div class="search-box d-none d-md-block">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="搜索用户、文章或话题...">
            </div>
            
            <div class="nav-actions d-flex align-items-center">
                <a class="nav-link" href="#">
                    <i class="fas fa-home fa-lg"></i>
                </a>
                <a class="nav-link notification-badge" href="#">
                    <i class="fas fa-bell fa-lg"></i>
                    <span class="badge-count">3</span>
                </a>
                <a class="nav-link" href="#">
                    <i class="fas fa-envelope fa-lg"></i>
                </a>
                <div class="dropdown ms-2">
                    <button class="btn btn-link nav-link p-0" type="button" data-bs-toggle="dropdown">
                        <img src="https://picsum.photos/100/100?random=77" alt="你的头像" class="rounded-circle" style="width: 36px; height: 36px; object-fit: cover;">
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i> 个人主页</a></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> 设置</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主容器 -->
    <div class="dashboard-container">
        <!-- 侧边栏导航 -->
        <aside class="sidebar">
            <div class="user-profile-preview">
                <img src="https://picsum.photos/100/100?random=77" alt="你的头像" class="preview-avatar">
                <h3 class="preview-name">李明</h3>
                <p class="preview-bio">产品设计师 | 摄影爱好者</p>
                <button class="edit-profile-btn active">
                    <i class="fas fa-edit me-1"></i> 编辑资料
                </button>
            </div>
            
            <span class="menu-section-title">个人中心</span>
            <ul class="sidebar-menu">
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-tachometer-alt menu-icon"></i>
                        <span>仪表盘</span>
                    </a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link active">
                        <i class="fas fa-user menu-icon"></i>
                        <span>个人资料</span>
                    </a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-images menu-icon"></i>
                        <span>我的相册</span>
                        <span class="menu-badge">12</span>
                    </a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-bookmark menu-icon"></i>
                        <span>我的收藏</span>
                    </a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-comment-alt menu-icon"></i>
                        <span>消息中心</span>
                        <span class="menu-badge">5</span>
                    </a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-bell menu-icon"></i>
                        <span>通知提醒</span>
                        <span class="menu-badge">3</span>
                    </a>
                </li>
            </ul>
            
            <span class="menu-section-title">社交管理</span>
            <ul class="sidebar-menu">
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-users menu-icon"></i>
                        <span>我的好友</span>
                        <span class="menu-badge">358</span>
                    </a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-user-plus menu-icon"></i>
                        <span>好友请求</span>
                        <span class="menu-badge">7</span>
                    </a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-star menu-icon"></i>
                        <span>我的粉丝</span>
                        <span class="menu-badge">1.2k</span>
                    </a>
                </li>
            </ul>
            
            <span class="menu-section-title">系统</span>
            <ul class="sidebar-menu">
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-cog menu-icon"></i>
                        <span>设置</span>
                    </a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-question-circle menu-icon"></i>
                        <span>帮助中心</span>
                    </a>
                </li>
                <li class="sidebar-menu-item">
                    <a href="#" class="sidebar-menu-link">
                        <i class="fas fa-sign-out-alt menu-icon"></i>
                        <span>退出登录</span>
                    </a>
                </li>
            </ul>
        </aside>
        
        <!-- 主内容区域 -->
        <main class="main-content">
            <div class="content-header">
                <div>
                    <h1 class="page-title">编辑个人资料</h1>
                    <p class="page-description">更新你的个人信息，让更多人了解你</p>
                </div>
                <div class="action-buttons">
                    <button class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i> 取消
                    </button>
                    <button class="btn btn-primary">
                        <i class="fas fa-save me-1"></i> 保存更改
                    </button>
                </div>
            </div>
            
            <form class="profile-form-card">
                <!-- 头像上传区域 -->
                <div class="form-section">
                    <h2 class="section-title">个人头像</h2>
                    <div class="avatar-upload-section">
                        <img src="https://picsum.photos/100/100?random=77" alt="当前头像" class="current-avatar">
                        <div class="avatar-upload-options">
                            <p class="upload-info">上传新头像（建议尺寸为400x400像素，支持JPG、PNG格式，文件大小不超过5MB）</p>
                            <label for="avatar-upload" class="file-upload-btn">
                                <i class="fas fa-upload me-1"></i> 选择图片
                            </label>
                            <input type="file" id="avatar-upload" class="file-input" accept="image/jpeg, image/png">
                            <button type="button" class="btn btn-outline-secondary">
                                <i class="fas fa-camera me-1"></i> 拍照上传
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 基本信息 -->
                <div class="form-section">
                    <h2 class="section-title">基本信息</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="fullname" class="form-label">姓名</label>
                            <input type="text" id="fullname" class="form-control" value="李明">
                            <div class="form-text">请使用真实姓名，将显示在你的个人资料中</div>
                        </div>
                        <div class="form-group">
                            <label for="nickname" class="form-label">昵称</label>
                            <input type="text" id="nickname" class="form-control" value="明设计">
                            <div class="form-text">你的昵称将显示在动态和评论中</div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">性别</label>
                            <div class="d-flex gap-3">
                                <label class="d-flex align-items-center gap-1">
                                    <input type="radio" name="gender" checked> 男
                                </label>
                                <label class="d-flex align-items-center gap-1">
                                    <input type="radio" name="gender"> 女
                                </label>
                                <label class="d-flex align-items-center gap-1">
                                    <input type="radio" name="gender"> 保密
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="birthday" class="form-label">生日</label>
                            <input type="date" id="birthday" class="form-control" value="1990-05-15">
                            <div class="form-text">你的生日仅自己可见，我们会在生日当天送上祝福</div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="location" class="form-label">所在地</label>
                            <input type="text" id="location" class="form-control" value="上海，中国">
                        </div>
                        <div class="form-group">
                            <label for="hometown" class="form-label">家乡</label>
                            <input type="text" id="hometown" class="form-control" value="北京，中国">
                        </div>
                    </div>
                </div>
                
                <!-- 个人简介 -->
                <div class="form-section">
                    <h2 class="section-title">个人简介</h2>
                    <div class="form-group">
                        <label for="bio" class="form-label">个人简介</label>
                        <textarea id="bio" class="form-control">热爱生活的产品设计师，专注用户体验与交互设计。拥有10年设计经验，曾主导多个大型产品的设计工作。

闲暇时喜欢摄影和旅行，用镜头记录世界各地的美好瞬间。已走过20多个国家，最喜欢的城市是京都和巴塞罗那。

相信好的设计应该是简洁、直观且富有温度的。欢迎交流设计心得和旅行故事。</textarea>
                        <div class="form-text">最多可输入500个字符，支持换行</div>
                    </div>
                </div>
                
                <!-- 职业信息 -->
                <div class="form-section">
                    <h2 class="section-title">职业信息</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="occupation" class="form-label">职业</label>
                            <input type="text" id="occupation" class="form-control" value="产品设计师">
                        </div>
                        <div class="form-group">
                            <label for="company" class="form-label">公司/组织</label>
                            <input type="text" id="company" class="form-control" value="创新科技有限公司">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="school" class="form-label">毕业院校</label>
                            <input type="text" id="school" class="form-control" value="上海设计学院">
                        </div>
                        <div class="form-group">
                            <label for="major" class="form-label">专业</label>
                            <input type="text" id="major" class="form-control" value="工业设计">
                        </div>
                    </div>
                </div>
                
                <!-- 社交账号 -->
                <div class="form-section">
                    <h2 class="section-title">社交账号</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="twitter" class="form-label">
                                <i class="fab fa-twitter text-info me-1"></i> Twitter
                            </label>
                            <input type="text" id="twitter" class="form-control" value="@liming_design">
                        </div>
                        <div class="form-group">
                            <label for="github" class="form-label">
                                <i class="fab fa-github text-dark me-1"></i> GitHub
                            </label>
                            <input type="text" id="github" class="form-control" value="liming1990">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="linkedin" class="form-label">
                                <i class="fab fa-linkedin text-primary me-1"></i> LinkedIn
                            </label>
                            <input type="text" id="linkedin" class="form-control" value="李明">
                        </div>
                        <div class="form-group">
                            <label for="instagram" class="form-label">
                                <i class="fab fa-instagram text-danger me-1"></i> Instagram
                            </label>
                            <input type="text" id="instagram" class="form-control" value="liming_photo">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="website" class="form-label">
                            <i class="fas fa-globe text-success me-1"></i> 个人网站
                        </label>
                        <input type="url" id="website" class="form-control" value="https://liming.design">
                    </div>
                </div>
                
                <!-- 兴趣爱好 -->
                <div class="form-section">
                    <h2 class="section-title">兴趣爱好</h2>
                    <div class="form-group">
                        <label class="form-label">选择你的兴趣爱好（最多10个）</label>
                        <div class="interests-container">
                            <div class="interest-tag">
                                <span>摄影</span>
                                <button type="button" class="remove-interest">×</button>
                            </div>
                            <div class="interest-tag">
                                <span>旅行</span>
                                <button type="button" class="remove-interest">×</button>
                            </div>
                            <div class="interest-tag">
                                <span>阅读</span>
                                <button type="button" class="remove-interest">×</button>
                            </div>
                            <div class="interest-tag">
                                <span>电影</span>
                                <button type="button" class="remove-interest">×</button>
                            </div>
                            <div class="interest-tag">
                                <span>徒步</span>
                                <button type="button" class="remove-interest">×</button>
                            </div>
                            <div class="add-interest">
                                <i class="fas fa-plus"></i>
                                <span>添加兴趣</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 语言能力 -->
                <div class="form-section">
                    <h2 class="section-title">语言能力</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">语言</label>
                            <input type="text" class="form-control" value="中文">
                        </div>
                        <div class="form-group">
                            <label class="form-label">熟练程度</label>
                            <select class="form-control">
                                <option>母语</option>
                                <option>精通</option>
                                <option>熟练</option>
                                <option>中级</option>
                                <option>基础</option>
                            </select>
                        </div>
                        <div class="form-group d-flex align-items-end">
                            <button type="button" class="btn btn-outline-secondary w-100">
                                <i class="fas fa-plus me-1"></i> 添加语言
                            </button>
                        </div>
                    </div>
                    
                    <div class="form-row mt-3">
                        <div class="form-group">
                            <label class="form-label">语言</label>
                            <input type="text" class="form-control" value="英语">
                        </div>
                        <div class="form-group">
                            <label class="form-label">熟练程度</label>
                            <select class="form-control">
                                <option>母语</option>
                                <option>精通</option>
                                <option selected>熟练</option>
                                <option>中级</option>
                                <option>基础</option>
                            </select>
                        </div>
                        <div class="form-group d-flex align-items-end">
                            <button type="button" class="btn btn-outline-secondary w-100">
                                <i class="fas fa-trash me-1"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 侧边栏菜单切换
            const menuLinks = document.querySelectorAll('.sidebar-menu-link');
            menuLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    // 移除所有链接的活跃状态
                    menuLinks.forEach(l => l.classList.remove('active'));
                    // 添加当前链接的活跃状态
                    this.classList.add('active');
                });
            });

            // 头像上传按钮功能
            const fileUploadBtn = document.querySelector('.file-upload-btn');
            const fileInput = document.getElementById('avatar-upload');
            
            fileUploadBtn.addEventListener('click', function() {
                fileInput.click();
            });
            
            fileInput.addEventListener('change', function(e) {
                if (e.target.files && e.target.files[0]) {
                    // 这里可以添加预览新头像的逻辑
                    const fileName = e.target.files[0].name;
                    console.log(`已选择文件: ${fileName}`);
                    // 实际应用中可以使用FileReader预览图片
                }
            });

            // 移除兴趣标签
            const removeInterestBtns = document.querySelectorAll('.remove-interest');
            removeInterestBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.closest('.interest-tag').remove();
                });
            });

            // 添加兴趣标签
            const addInterestBtn = document.querySelector('.add-interest');
            addInterestBtn.addEventListener('click', function() {
                const interest = prompt('请输入兴趣爱好:');
                if (interest && interest.trim() !== '') {
                    const interestsContainer = document.querySelector('.interests-container');
                    const newTag = document.createElement('div');
                    newTag.className = 'interest-tag';
                    newTag.innerHTML = `
                        <span>${interest}</span>
                        <button type="button" class="remove-interest">×</button>
                    `;
                    
                    // 为新标签添加删除功能
                    newTag.querySelector('.remove-interest').addEventListener('click', function() {
                        newTag.remove();
                    });
                    
                    // 插入到添加按钮之前
                    interestsContainer.insertBefore(newTag, addInterestBtn);
                }
            });

            // 保存按钮功能
            const saveBtn = document.querySelector('.btn-primary');
            saveBtn.addEventListener('click', function() {
                // 这里可以添加表单验证和提交逻辑
                alert('个人资料已保存！');
            });

            // 取消按钮功能
            const cancelBtn = document.querySelector('.btn-outline-secondary');
            cancelBtn.addEventListener('click', function() {
                if (confirm('确定要放弃更改吗？未保存的内容将会丢失。')) {
                    // 这里可以添加返回上一页的逻辑
                    console.log('已取消编辑');
                }
            });
        });
    </script>
</body>
</html>
    
